<template>
  <view class="warehouse-container">
    <view class="header">
      <roc-icon-plus type="fas" name="arrow-left" :size="20" color="#333" @click="goBack"></roc-icon-plus>
      <text class="title">仓库管理</text>
    </view>
    
    <view class="content">
      <text class="intro-text">仓库管理系统用于农资和农产品的入库、出库、库存管理，提供实时库存状态查询，帮助农场主合理规划采购和销售计划。</text>

      <view class="function-grid">
        <view class="function-item" @click="navigateToWarehouseIn">
          <view class="function-icon">
            <roc-icon-plus type="fas" name="plus-circle" :size="32" color="#2E6140"></roc-icon-plus>
          </view>
          <text class="function-title">农资入库</text>
          <text class="function-desc">管理农资入库记录</text>
        </view>

        <view class="function-item" @click="navigateToWarehouseOut">
          <view class="function-icon">
            <roc-icon-plus type="fas" name="minus-circle" :size="32" color="#2E6140"></roc-icon-plus>
          </view>
          <text class="function-title">农资出库</text>
          <text class="function-desc">管理农资出库记录</text>
        </view>

        <view class="function-item" @click="navigateToInventory">
          <view class="function-icon">
            <roc-icon-plus type="fas" name="boxes" :size="32" color="#2E6140"></roc-icon-plus>
          </view>
          <text class="function-title">库存管理</text>
          <text class="function-desc">查看库存状态</text>
        </view>

        <view class="function-item" @click="navigateToStatistics">
          <view class="function-icon">
            <roc-icon-plus type="fas" name="chart-bar" :size="32" color="#2E6140"></roc-icon-plus>
          </view>
          <text class="function-title">统计报表</text>
          <text class="function-desc">查看仓库统计</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '仓库管理',
      type: ''
    }
  },
  onLoad(options) {
    if (options.type) {
      this.type = options.type;
      switch(options.type) {
        case 'input':
          this.title = '采购入库';
          break;
        case 'output':
          this.title = '农资出库';
          break;
        case 'inventory':
          this.title = '物品库存';
          break;
        case 'product':
          this.title = '农产品入库';
          break;
        case 'product_out':
          this.title = '农产品出库';
          break;
        case 'warehouse':
          this.title = '盘库';
          break;
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },

    // 导航到农资入库页面
    navigateToWarehouseIn() {
      uni.navigateTo({
        url: '/pages/warehouse/warehouseIn/warehouseIn'
      });
    },

    // 导航到农资出库页面
    navigateToWarehouseOut() {
      uni.showToast({
        title: '农资出库功能开发中',
        icon: 'none'
      });
    },

    // 导航到库存管理页面
    navigateToInventory() {
      uni.showToast({
        title: '库存管理功能开发中',
        icon: 'none'
      });
    },

    // 导航到统计报表页面
    navigateToStatistics() {
      uni.navigateTo({
        url: '/pages/warehouse/statistics/statistics'
      });
    }
  }
}
</script>

<style lang="scss">
.warehouse-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-right: 40rpx;
    }
  }
  
  .content {
    padding: 40rpx 30rpx;
    background-color: #fff;
    margin: 20rpx;
    border-radius: 12rpx;

    .intro-text {
      font-size: 30rpx;
      color: #333;
      line-height: 1.6;
      margin-bottom: 40rpx;
    }

    .function-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20rpx;

      .function-item {
        background-color: #f8f9fa;
        border-radius: 12rpx;
        padding: 30rpx 20rpx;
        text-align: center;
        border: 2rpx solid transparent;
        transition: all 0.3s ease;

        &:active {
          background-color: #e9ecef;
          border-color: #2E6140;
          transform: scale(0.98);
        }

        .function-icon {
          margin-bottom: 16rpx;
        }

        .function-title {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }

        .function-desc {
          display: block;
          font-size: 24rpx;
          color: #666;
          line-height: 1.4;
        }
      }
    }
  }
}
</style> 